<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./resrt.css">
    <style>
        #app{
            width: 400px;
            margin: 100px auto;
        }
        .list{
            display: flex;
            height: 100px;
            width: 100%;
        }
        img{
            height: 80px;
            line-height: 100px;
        }
        .centent{
            line-height: 50px;
            width: 300px;
            text-align: center;
        }
        .right{
            display: flex;
            line-height: 100px;
            width: 100px;
            justify-content: space-evenly;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="top">
            <div class="list" v-for="(item , index) in list" :key="index">
                <div class="left">
                    <img :src="item.pic" alt="">
                </div>
                <div class="centent">
                    <h2>{{item.name}}</h2>
                    <h3>{{item.money}}</h3>
                </div>
                <div class="right">
                    <h4 @click="sub(item)">-</h4>
                    <h5>{{item.num}}</h5>
                    <h6 @click="add(item)">+</h6>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="sum" v-text> 总数： {{sun()}}</div>
            <div class="money" v-text> 总金额： {{money()}}</div>
        </div>
    </div>
</body>
</html>
<script src="./vue-2.5.21.js"></script>
<script>
    var v = new Vue ({
        el:'#app',
        data:{
            list:[
                {id:1 , name : '秋刀鱼' , money : 40 , num : 1 , pic: './pic.jpg'},
                {id:1 , name : '秋刀鱼' , money : 30 , num : 1 , pic: './pic.jpg'},
                {id:1 , name : '秋刀鱼' , money : 20 , num : 1 , pic: './pic.jpg'},
                {id:1 , name : '秋刀鱼' , money : 10 , num : 1 , pic: './pic.jpg'}
            ],
        },
        methods:{
            sun(){
                var sum = 0
                this.list.map((item) => {
                    sum += item.num
                })
                return sum
            },
            money(){
                var money = 0
                this.list.map((item) => {
                    money += (item.num * item.money)
                })
                return money
            },
            sub(item){
                if(item.num > 1){
                    item.num--
                }
            },
            add(item){
                if(item.num < 5){
                    item.num++
                }
            }
        }
    })
</script>